<template>
  <view class="c-pt40">
    <view class="card">
      <view class="card-title">退款的商品</view>
      <view class="c-flex">
        <view class="imgBox">
          <image :src="goodsDetilData.productPic" mode="" />
        </view>
        <view class="c-flex c-flex-column rightInfor c-flex-between">
          <view>{{ goodsDetilData.productName }}</view>
          <view class="c-flex c-flex-between">
            <view>{{ goodsDetilData.skuName }}</view>
            <view>×{{ goodsDetilData.productCount }}</view>
          </view>
          <view>￥{{ goodsDetilData.originalSumPrice }}</view>
        </view>
      </view>
    </view>
    <u-cell-group title="退款信息" :title-style="titleStyle">
      <u-cell-item :value="statusVal" @click="selectStatus()" class="bottom-none">
        <view slot="title" class="c-flex">
          <view>货物状态</view>
          <view class="c-red">*</view>
        </view>
      </u-cell-item>
      <u-cell-item :value="testVal" @click="tocause()" class="bottom-none">
        <view slot="title" class="c-flex">
          <view>退款原因</view>
          <view class="c-red">*</view>
        </view>
      </u-cell-item>
      <u-cell-item :arrow="false" class="bottom-none">
        <view slot="title" class="c-flex">
          <view>退款金额</view>
          <view class="c-red">*</view>
        </view>
        <view slot="right-icon" class="c-flex c-color-F36">
          <view>￥</view>
          <view>{{ goodsDetilData.originalSumPrice }}</view>
        </view>
      </u-cell-item>
      <view class="c-index-padding describe">
        不可修改，最多￥{{ goodsDetilData.originalSumPrice }},含发货邮费￥0.00
      </view>
    </u-cell-group>
    <!-- 补充描述和凭证 -->
    <view>
      <view class="c-cell-title">补充描述和凭证</view>
      <u-card
        :head-style="{padding: '0', paddingBottom: '20rpx', paddingTop: '20rpx', backgroundColor: '#FAFAFA'}"
        :body-style="{padding: '0', backgroundColor: '#FAFAFA', paddingBottom: '20rpx'}"
      >
        <view class="" slot="head">
          <u-input v-model="value" type="textarea" :border="false" :auto-height="true" maxlength="200" />
        </view>
        <view class="" slot="body">
          <u-upload :action="action" @on-success="uploadSuccess" @on-remove="uploadRemove" :max-count="3"></u-upload>
        </view>
      </u-card>
    </view>
    <SaveButton text="提交退款原因" @navTo="save" />
    <StatusSlip ref="statusslip" @status="saveStatus" />
  </view>
</template>
<script>
import order from '@/services/order'
import SaveButton from '@/commponents/public/button/SaveButton'
import StatusSlip from './StatusSlip.vue'
import config from '@/common/config/config'
export default {
  components: {
    SaveButton,
    StatusSlip
  },
  data() {
    return {
      fileList: [],
      action: config.service + '/app/upload',
      value: '',
      titleStyle: {
        padding: '30rpx 32rpx 10rpx 32rpx',
        fontSize: '30rpx',
        fontWeight: '600',
        color: '#000'
      },
      list: [],
      orderitem: {},
      type: '',
      testVal: '请选择',
      statusVal: '请选择',
      id: '',
      status: '',
      orderid: '',
      goodsDetilData: '',
      num: ''
    }
  },
  onLoad(option) {
    if (option.id) this.id = option.id
    if (option.orderid) this.orderid = option.orderid
    if (option.status) this.status = option.status
    if (option.type) this.type = option.type
    order.info(this.orderid).then(({data}) => {
      let orderDetailList = data.orderDetailList
      let goodsInfo = orderDetailList.find(i => i.id == this.id)
      if (!!goodsInfo) {
        this.goodsDetilData = goodsInfo
        this.num = this.goodsDetilData.productCount
      }
    })
  },
  onShow() {
    if (!wx.getStorageSync('causeText')) {
      this.testVal = '请选择'
      return
    }
    this.testVal = wx.getStorageSync('causeText')
  },
  methods: {
    saveStatus(val) {
      this.statusVal = val
    },
    uploadSuccess(data, index, lists, name) {
      this.fileList = lists
    },
    uploadRemove(index, lists, name) {
      this.fileList = lists
    },
    tocause() {
      wx.navigateTo({
        url: '/pages/sales/SalesCause'
      })
    },
    selectStatus() {
      this.$refs.statusslip.openSlip()
    },
    save() {
      if (this.testVal == '请选择' || this.statusVal == '请选择') {
        wx.showToast({
          title: '请填写必填项',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      order
        .afterSale({
          afterSaleDescribe: this.value,
          afterSaleIsExpressStatus: this.statusVal == '未收到货' ? 0 : 1,
          afterSaleReason: this.testVal,
          afterSaleReasonImg: this.fileList.map(i => i.response.data).join(','),
          afterSaleType: this.type == 'tuikuan' ? 1 : 2,
          id: this.id
        })
        .then(data => {
          wx.showToast({
            title: data.msg,
            duration: 2000
          })
          if (data.data) {
            setTimeout(() => {
              wx.switchTab({
                url: '/pages/order/my'
              })
            }, 500)
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.card {
  margin-top: 30rpx;
  box-sizing: border-box;
  box-shadow: 0px 0px 48rpx 0px rgba(15, 15, 15, 0.22);
  border-radius: 15rpx;
  padding: 30rpx 45rpx;
  margin: 0 auto;
  width: 93%;

  .card-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #2b2b2b;
    margin-bottom: 30rpx;
  }
  .imgBox {
    width: 190rpx;
    border-radius: 10rpx;
    height: 190rpx;
    margin-right: 15rpx;
  }
  .rightInfor {
    > view {
      font-family: PingFang SC;
      font-weight: 500;
      &:first-of-type {
        color: #2b2b2b;
        font-size: 27rpx;
      }
      &:nth-of-type(2) {
        color: #939393;
        font-size: 23rpx;
      }
      &:nth-of-type(3) {
        color: #ff6a21;
        font-weight: 600;
        font-size: 27rpx;
      }
    }
  }
}
image {
  width: 190rpx;
  height: 190rpx;
}
.labelwidth {
  width: calc(61%);
  padding: 10rpx 0;
}
.bottom-none {
  /deep/ .u-cell {
    padding-bottom: 0;
  }
}
.describe {
  color: #c1c1c1;
  font-size: 25rpx;
}
</style>
